<template>
  <div class="base-setting ">
    <el-alert
    title="只能设置一个二维码画布"
    type="error">
  </el-alert>
    <x-line class="title" title="二维码设置" icon="flaticon-layers" intro="请设置二维码画布的元素，支持图片、文字、二维码三种方式设置，可以在上角新增画布元素">
      <div slot="headerRight" class="headerRight">
        <el-button type="primary" size="mini" @click="add">新增画布元素</el-button>
      </div>
    </x-line>
    <el-table :data="viewModel" style="width: 90%" :row-class-name="tableRowClassName" v-if="viewModel" :key="tableKey">
      <el-table-column prop="typeName" label="画布类型" width="120">
      </el-table-column>
      <el-table-column prop="x" label="x轴起点" width="120">
      </el-table-column>
      <el-table-column prop="y" label="y轴起点" width="120">
      </el-table-column>
      <el-table-column prop="width" label="画布宽度" width="120">
      </el-table-column>
      <el-table-column prop="height" label="画布高度">
      </el-table-column>
      <el-table-column label="操作" width="160">
        <template fixed="right" slot-scope="scope">
          <div class="scope-buttom">
            <el-button size="mini" type="primary" round @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" round @click="handleDelete(scope.$index, scope.row)" type="danger">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-el-drag-dialog title="画布设置" :visible.sync="dialogVisible" width="60%" top="10vh">
      <div class="setting-edit">
        <el-form-item label="画布类型" required>
          <x-radio v-model="canvasItem.type" type="QrCodeSettingType"></x-radio>
        </el-form-item>
        <setting-image v-model="canvasItem" v-if="canvasItem.type===3"></setting-image>
        <setting-qrcode v-model="canvasItem" v-if="canvasItem.type===1"></setting-qrcode>
        <setting-text v-model="canvasItem" v-if="canvasItem.type===2"></setting-text>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save()">确定保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import settingImage from './dialog/setting_image.vue'
  import settingQrcode from './dialog/setting_qrcode.vue'
  import settingText from './dialog/setting_text.vue'
  import elDragDialog from '@/service/directives/el-dragDialog'
  import ala from 'ala'
  import api from '@/service/api.js'
export default {
    directives: { elDragDialog },
    components: {
      settingImage,
      settingQrcode,
      settingText
    },
    model: {
      prop: 'dataModel',
      event: 'change'
    },
    props: {
      dataModel: {},
      title: {}
    },
    data () {
      return {
        viewModel: null,
        canvasItem: {},
        tableKey: '',
        dialogVisible: false
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      async init () {
        this.viewModel = this.dataModel
        this.tableKey = Math.random()
        if (this.viewModel) {
          this.viewModel.forEach(r => {
            r.typeName = this.getTypeName(r.type)
          })
        }
      },
      handleDelete (index, val) {
        this.$confirm('是否删除？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          this.viewModel.splice(index, 1)
        })
      },
      handleEdit (index, data) {
        this.canvasItem = data
        this.dialogVisible = true
      },
      async add () {
        var id = await this.$api.objectId()
        this.canvasItem = {
          id: id,
          type: 1,
          x: 0,
          backgroundColor: '#ffffff',
          foreground: '#000000',
          y: 0,
          size: 100,
          iconSize: 48,
          height: 100,
          color: '#000000',
          width: 100
        }
        this.dialogVisible = true
      },
      save () {
        this.canvasItem.typeName = this.getTypeName(this.canvasItem.type)
        if (!this.viewModel) {
          this.viewModel = []
        }
        var isAdd = true
        this.viewModel.forEach(r => {
          if (r.id === this.canvasItem.id) {
            r = this.canvasItem
            isAdd = false
          }
        })
        if (isAdd === true) {
          this.viewModel.push(this.canvasItem)
        }
        this.dialogVisible = false
      },
      tableRowClassName ({ row, rowIndex }) {
        if (rowIndex === 1) {
          return 'warning-row'
        } else if (rowIndex === 3) {
          return 'success-row'
        }
        return ''
      },
      getTypeName (type) {
        if (type === 3) {
          return '图片'
        }
        if (type === 2) {
          return '文本'
        }
        if (type === 1) {
          return '二维码'
        }
      }
    },
    watch: {
      viewModel: {
        deep: true,
        handler (val) {
          this.viewModel.typeName = this.getTypeName(this.viewModel.type)
          this.tableKey = Math.random()
          this.$emit('change', this.viewModel)
        }
      }
    }
  }
</script>
<style  rel="stylesheet/scss" lang="scss">
  .base-setting {
    .setting-edit {
      width: 96%;
      min-height: 460px;
    }
    .el-dialog__footer {
      border-top: 1px solid #e6e6e6;
    }
    .title {
      margin-left: 5px;
      margin-right: 5px;
      color: #ff4400;
    }
    .x-select-image {
      margin-bottom: -20px;
    }
    .el-form-item {
      margin-bottom: 0px;
      line-height: 28px;
    }
    .el-form-item__content {
      line-height: 30px;
    }

    .el-table .warning-row {
      background: oldlace;
    }

    .el-table .success-row {
      background: #f0f9eb;
    }

    margin: 10px;
    width: 90%;
    .title {
      margin-bottom: 5px;
      .headerRight {
        margin: 5px;
      }
    }
    .setting-edit {
      margin-top: 20px;
      .sale-intro {
        margin-top: -3px;
        margin-left: 5px;
      }
    }
  }
</style>